<template>
    <div class="son9">
        <h3>SonDemo9</h3>
        <div>name:{{ myUser.name }} sex:{{ myUser.sex }} age:{{ myUser.age }}</div>
        <button type="button" @click="editUserInfo">修改用户的值</button>
    </div>
</template>

<script setup lang="ts">
import { ref } from 'vue'

export interface Iuser {
    name: string
    sex: string
    age: number
}
// 响应式 Props 解构 3.5
const { user } = defineProps<{
    user: Iuser
}>()

const myUser = ref(user)

const editUserInfo = () => {
    myUser.value.age = 99
}
</script>

<style lang="scss" scoped>
.son9 {
    border: 3px solid deepskyblue;
    padding: 10px;
    margin: 10px;
}

button {
    padding: 3px 6px;
    background-color: #ddd;
    border-radius: 3px;
}
</style>